import * as echarts from 'echarts'
import cdfeature from '@/assets/geojson/cdfeature.json'

export function mapChart(id, optionData) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(id));
    }
    echarts.registerMap('成都', cdfeature)
    let nameData = cdfeature.features.map((item) => {
        return {
            name: item.properties.name
        }
    })
    let option = {
        geo: [
            {
                map: '成都',
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '50%'],
                layoutSize: '180%',
                show: true,
                roam: false,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#c0f3fb',
                        borderWidth: 1,
                        shadowColor: '#8cd3ef',
                        shadowOffsetY: 10,
                        shadowBlur: 120,
                        areaColor: 'transparent'
                    }
                }
            },
            // 重影
            {
                type: 'map',
                map: '成都',
                zlevel: -1,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '51%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        // borderColor:"rgba(17, 149, 216,0.6)",
                        borderColor: 'rgba(58,149,253,0.8)',
                        shadowColor: 'rgba(172, 122, 255,0.5)',
                        shadowOffsetY: 5,
                        shadowBlur: 15,
                        areaColor: 'rgba(5,21,35,0.1)'
                    }
                }
            },
            {
                type: 'map',
                map: '成都',
                zlevel: -2,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '52%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        // borderColor: "rgba(57, 132, 188,0.4)",
                        borderColor: 'rgba(58,149,253,0.6)',
                        shadowColor: 'rgba(65, 214, 255,0.6)',
                        shadowOffsetY: 5,
                        shadowBlur: 15,
                        areaColor: 'rgba(5,21,35,0.1)'
                    }
                }
            },
            {
                type: 'map',
                map: '成都',
                zlevel: -3,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '53%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        // borderColor: "rgba(11, 43, 97,0.8)",
                        borderColor: 'rgba(58,149,253,0.4)',
                        shadowColor: 'rgba(29, 111, 165,1)',
                        shadowOffsetY: 15,
                        shadowBlur: 10,
                        areaColor: 'rgba(5,21,35,0.1)'
                    }
                }
            },
            {
                type: 'map',
                map: '成都',
                zlevel: -4,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '54%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        // borderColor: "rgba(11, 43, 97,0.8)",
                        borderColor: 'rgba(5,9,57,0.8)',
                        shadowColor: 'rgba(29, 111, 165,0.8)',
                        shadowOffsetY: 15,
                        shadowBlur: 10,
                        areaColor: 'rgba(5,21,35,0.1)'
                    }
                }
            }
        ],
        series: [
            {
                name: '成都市数据',
                type: 'map',
                map: '成都', // 自定义扩展图表类型
                aspectScale: 1,
                zoom: 0.65, // 缩放
                showLegendSymbol: true,
                label: {
                    normal: {
                        show: true,
                        textStyle: { color: '#fff', fontSize: '120%' }
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: {
                            type: 'linear',
                            x: 1200,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
                                }
                            ],
                            global: true // 缺省为 false
                        },
                        borderColor: '#fff',
                        borderWidth: 0.2
                    },
                    emphasis: {
                        show: false,
                        color: '#fff',
                        areaColor: 'rgba(0,254,233,0.6)'
                    }
                },
                layoutCenter: ['50%', '50%'],
                layoutSize: '180%',
                markPoint: {
                    symbol: 'none'
                },
                data: nameData
            },
            // {
            //   type: 'lines',
            //   zlevel: 2,
            //   effect: {
            //     show: true,
            //     period: 4, //箭头指向速度，值越小速度越快
            //     trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            //     symbol: 'arrow', //箭头图标
            //     symbolSize: 6 //图标大小
            //   },
            //   lineStyle: {
            //     normal: {
            //       color: 'rgba(255, 200, 113, 1)',
            //       width: 2, //尾迹线条宽度
            //       opacity: 1, //尾迹线条透明度
            //       curveness: 0.3, //尾迹线条曲直度
            //       shadowColor: 'rgba(255, 200, 113, 0.2)',
            //       shadowBlur: 10
            //     }
            //   },
            //   data: [
            //     [points[0], points[1]],
            //     [points[0], points[2]],
            //     [points[0], points[3]]
            //   ]
            // },
            {
                // 动效散点公共配置项
                silent: true, // 暂不支持鼠标交互
                type: 'effectScatter',
                coordinateSystem: 'geo',
                rippleEffect: {
                    //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    // brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 5 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) {
                            //圆环显示文字
                            return params.data.name
                        },
                        fontSize: 13,
                        color: 'white'
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: 10,
                itemStyle: {
                    normal: {
                        show: false,
                        borderWidth: 1,
                        color: 'rgba(255, 86, 11, 1)'
                    }
                },
                data: [
                    {
                        name: '',
                        value: [104.547644, 30.410937, 323]
                    },
                    {
                        name: '',
                        value: [103.92342, 30.574884, 323]
                    },
                ]
            },
            {
                // 动效散点公共配置项
                silent: true, // 暂不支持鼠标交互
                type: 'effectScatter',
                coordinateSystem: 'geo',
                rippleEffect: {
                    //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    // brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 5 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) {
                            //圆环显示文字
                            return params.data.name
                        },
                        fontSize: 13,
                        color: 'white'
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: 10,
                itemStyle: {
                    normal: {
                        show: false,
                        borderWidth: 1,
                        color: 'rgba(247, 255, 11, 1)'
                    }
                },
                data: [
                    {
                        name: '',
                        value: [103.647193, 30.988763, 523]
                    },
                    {
                        name: '',
                        value: [103.856423, 30.681956, 323]
                    },
                ]
            },
            {
                // 动效散点公共配置项
                silent: true, // 暂不支持鼠标交互
                type: 'effectScatter',
                coordinateSystem: 'geo',
                rippleEffect: {
                    //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    // brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 5 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) {
                            //圆环显示文字
                            return params.data.name
                        },
                        fontSize: 13,
                        color: 'white'
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: 10,
                itemStyle: {
                    normal: {
                        show: false,
                        borderWidth: 1,
                        color: 'rgba(255, 22, 11, 1)'
                    }
                },
                data: [
                    {
                        name: '',
                        value: [104.251342, 30.8786, 523]
                    }
                ]
            }
        ]
    }
    myChart.setOption(option)
}
export function pieChart(id, optionData) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(id));
    }
    let option = {
        title: {
            text: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            left: optionData.legend,
            top: 'middle',
            textStyle: {
                color: '#fff'
            },
            icon: 'circle',
            itemWidth: 6,
            itemHeight: 6,
            align: 'left'
        },
        series: [
            {
                name: '预警记录',
                type: 'pie',
                radius: optionData.size,
                center: [optionData.center, '50%'],
                label: {
                    show: false,
                },
                data: [
                    { value: 7, name: '低风险' },
                    { value: 4, name: '中风险' },
                    { value: 3, name: '高风险' }
                ]
            }
        ],
        color: ['#0ac6a5', '#f19e66', '#fdf350'],
    };
    myChart.setOption(option)
}
export function barlineChart(id, optionData) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(id));
    }
    let option = {
        title: {
            text: '灾情趋势',
            textStyle: {
                align: 'left',
                color: '#fff',
                fontSize: 16,
            },
            top: '3%',
            left: '10%',
        },
        grid: {
            top: "25%",
            bottom: "15%"
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                label: {
                    show: false,
                }
            }
        },
        legend: {
            data: ["库存", "需求"],
            top: "15%",
            textStyle: {
                color: "#ffffff"
            }
        },
        xAxis: {
            data: [
                '2021',
                '2022',
                '2023',
                '2024'
            ],
            axisLine: { show: true, lineStyle: { color: '#CBDDF4' } },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#7DB6B2"
                }
            },

        },
        yAxis: [
            {
                type: "value",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: { color: '#CBDDF4' }
                },
                axisLabel: {
                    show: true,

                    textStyle: {
                        color: "#7DB6B2"
                    },
                },
            },
        ],
        series: [{
            name: "数量",
            type: "bar",
            barWidth: 15,
            smooth: true,
            showAllSymbol: true,
            symbol: "circle",
            itemStyle: {
                normal: {
                    color: "#f49b60"
                },
            },
            data: [100, 200, 300, 200]
        },
        {
            name: "数量",
            type: "line",
            barWidth: 15,
            showSymbol: false,
            itemStyle: {
                normal: {
                    color: "#09F1C8",
                },
            },
            data: [100, 200, 300, 200]
        }
        ]
    };
    myChart.setOption(option)
}
export function barsChart(id, optionData) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(id));
    }
    const Data = ["2021", "2022", "2023", "2024"]
    const xzData = [200, 250, 370, 150]
    const tclData = [150, 140, 300, 110]
    const tbData = [80, 70, 80, 70]
    let option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13,5,30,.6)',
            borderWidth: 1,
            borderColor: '#32A1FF',
            padding: 5,
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            itemWidth: 10,
            itemHeight: 10,
            top: 5,
            right: 30,
            icon: 'rect',
            textStyle: {
                color: '#c7d3e5'
            }
        },
        grid: {
            top: '14%',
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: Data,
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.8)',
                    fontSize: 14,
                    interval: 0,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2D4377'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#2D4377',
                        type: "dotted",
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                position: 'left',
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 14,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2D4377'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#2D4377',
                        type: "dotted",
                    }
                },
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#FFFFFF",
                    }
                },
            }
        ],
        series: [
            {
                name: '类型1',
                type: 'bar',
                barWidth: 10,
                data: xzData,
                barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
                barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
                itemStyle: {
                    barBorderRadius: 4,
                    barCategoryGap: '40%',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(54, 220, 255, 0.8)",
                        },
                        {
                            offset: 1,
                            color: "rgba(41, 104, 233, 0.1)",
                        },
                    ]),
                }
            },
            {
                name: '类型2',
                type: 'bar',
                barWidth: 10,
                barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
                barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
                itemStyle: {
                    barBorderRadius: 4,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(54, 255, 182, 0.8)",
                        },
                        {
                            offset: 1,
                            color: "rgba(6, 187, 61, 0.1)",
                        },
                    ]),
                },
                data: tclData
            },
            {
                name: '类型3',
                type: 'bar',
                barWidth: 10,
                barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
                barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
                itemStyle: {
                    barBorderRadius: 4,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(234, 161, 84, 0.8)",
                        },
                        {
                            offset: 1,
                            color: "rgba(219, 162, 62, 0.1)",
                        },
                    ]),
                },
                data: tbData
            },
        ]
    };
    myChart.setOption(option)
}
export function ringChart(id, optionData) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(id));
    }
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 15,
            right: 10,
            orient: 'vertical',
            left: 'right',
            textStyle: {
                color: '#fff'
            },
            align: 'left',
            icon: 'circle',
            itemWidth: 6,
            itemHeight: 6,
            itemGap: 15
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['45%', '70%'],
                center: ['30%', '50%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '名称1' },
                    { value: 735, name: '名称2' },
                    { value: 580, name: '名称3' },
                    { value: 484, name: '名称4' },
                    { value: 300, name: '名称5' }
                ]
            }
        ],
        color: ['#01ECEC', '#0AC6A5', '#FDF350', '#FF6D5E', '#F19E66'],
    };
    myChart.setOption(option)
}
export function barChart(id, optionData) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(id));
    }
    const data = [
        { name: '类型1', value: 100 },
        { name: '类型2', value: 125 },
        { name: '类型3', value: 500 },
        { name: '类型4', value: 342 },
        { name: '类型5', value: 652 },
        { name: '类型6', value: 234 },
        { name: '类型7', value: 532 },
    ]


    // 底部立体柱子
    let bottomBar = data.map((item, index) => {
        return {
            value: item.value,
            itemStyle: {
                normal: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(23, 131, 246,.7)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(8, 97, 131,.7)',
                            },
                            {
                                offset: 0.99,
                                color: 'rgba(3, 57, 110,.7)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(3, 57, 110,0)',
                            },
                        ],
                    },
                },
            },
        };
    });
    // 中间圆片
    let middleCircle = data.map((item, index) => {
        return {
            name: '',
            value: item.value,
            symbolPosition: 'end',
            symbolSize: item.value === 0 ? 0 : [20, 8], // 当数值为0时，消失
            itemStyle: {
                color: 'rgba(83, 232, 240)',
            },
        };
    });

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            backgroundColor: 'rgba(1, 65, 122,0.5)',
            borderWidth: 0,
            padding: 5,
            textStyle: {
                color: 'rgba(255,255,255)',
                fontSize: 18,
            },
            formatter: function (item) {
                return `<div style="position: relative;padding-left:20px"><div style="position: absolute;left:3px;top:50%;transform: translateY(-50%);width:2px;height:33px;background-color:rgba(28, 205, 255)"></div>${item[0].name} </br> 日产量:  ${item[0].value} kg </div>`
            },
        },
        grid: {
            bottom: '15%',
            top: '5%',
            right: '5%',
            left: '10%',
            containLabel: false, // 让图表内容完全显示，并且在 4 边留下边距。
            axisPointer: {
                shadowStyle: {
                    color: 'rgba(135, 206, 235, 0.5)',
                },
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,//两侧留白
            axisLine: {
                lineStyle: {
                    color: 'rgba(2, 119, 175)',
                    width: 2,
                    type: 'solid',
                },
                show: true,
                onZero: false // 将 x 轴坐标轴置于最低刻度上
            },
            axisLabel: {
                interval: 0,
                color: 'rgba(255,255,255)', //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                margin: 10
            },
            axisTick: {
                show: false,
            },
            data: data.map(v => v.name)
        },
        yAxis: {
            // name: '温度',
            type: 'value',
            min: "0",
            splitLine: {
                show: false, // 开启分割线
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                color: 'rgba(207, 219, 230)'
            },
        },
        series: [
            //底部立体柱
            {
                z: 30,
                stack: '1',
                type: 'bar',
                silent: true,
                barWidth: 20,
                data: bottomBar,
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    color: 'rgba(255, 255, 255)', // 标签颜色
                    textStyle: {
                        color: 'rgba(28, 205, 255)', // 标签颜色
                        fontStyle: 'normal', // 字体风格
                        fontWeight: 'normal', // 字体粗细
                        fontFamily: 'sans-serif', // 字体系列
                        fontSize: 12, // 字体大小
                        lineHeight: 24, // 行高
                    },
                },
                itemStyle: {
                    color: '#000',
                    emphasis: {
                        // 普通图表的高亮颜色
                        // color: 'rgba(38, 207, 254)',
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(38, 207, 254,.7)',
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(18, 151, 173,.7)',
                                },
                                {
                                    offset: 0.99,
                                    color: 'rgba(3, 57, 110,.7)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(3, 57, 110,0)',
                                },
                            ],
                        },
                        borderWidth: 1,
                        borderColor: 'rgba(70, 215, 255)'
                    }
                },
            },
            // 中间圆片
            {
                name: '',
                z: 100,
                type: 'pictorialBar',
                symbolSize: [20, 10],
                symbolOffset: [0, -5],
                data: middleCircle,
            },
        ],
    };
    myChart.setOption(option)
}
export function areasChart(id, optionData) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(id));
    }
    const data = [
        { dateStr: '2024-01', totalVolume: 1423, supplyVolume: 235, permitVolume: 847 },
        { dateStr: '2024-02', totalVolume: 1023, supplyVolume: 335, permitVolume: 547 },
        { dateStr: '2024-03', totalVolume: 1123, supplyVolume: 535, permitVolume: 647 },
        { dateStr: '2024-04', totalVolume: 1823, supplyVolume: 235, permitVolume: 847 },
        { dateStr: '2024-05', totalVolume: 1223, supplyVolume: 835, permitVolume: 247 },
        { dateStr: '2024-06', totalVolume: 1023, supplyVolume: 235, permitVolume: 847 },
    ]
    var xAxisData = [], yAxisTotalData = [], yAxisWaterWorks = [], yAxisOwned = [];
    for (var i = 0; i < data.length; i++) {
        xAxisData.push(data[i].dateStr);
        yAxisTotalData.push((data[i].totalVolume).toFixed(2));
        yAxisWaterWorks.push((data[i].supplyVolume).toFixed(2));
        yAxisOwned.push((data[i].permitVolume).toFixed(2));
    }
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            right: '5%',
            left: '10%',
            bottom: '10%'
        },
        legend: {
            itemWidth: 10,
            itemHeight: 10,
            left: 'right',
            textStyle: {
                color: "#ffffff"
            },
            data: ['类型1', '类型2', '类型3'],
        },
        xAxis: [{
            type: 'category',
            data: xAxisData,
            boundaryGap: false, //x轴顶头显示
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            },
            axisLabel: {
                margin: 10,
                color: '#e2e9ff',
            },
        }],
        yAxis: [{
            name: '',
            boundaryGap: ['0%', '12%'],
            nameTextStyle: {
                verticalAlign: 'middle',
                align: "right"
            },
            axisLabel: {
                formatter: '{value}',
                color: '#e2e9ff',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,1)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            }
        }],
        series: [
            {
                name: "类型1",
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                color: 'RGB(7,221,183,1)',
                data: yAxisTotalData,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "RGB(7,221,183,1)"
                    },
                    {
                        offset: 1,
                        color: "RGB(7,221,183,0)"
                    }
                    ])
                },
            },
            {
                name: "类型2",
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                color: 'RGB(244,155,96,1)',
                data: yAxisWaterWorks,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "RGB(244,155,96,1)"
                    },
                    {
                        offset: 1,
                        color: "RGB(244,155,96,0)"
                    }
                    ])
                },
            },
            {
                name: "类型3",
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                color: 'RGB(34,145,227,1)',
                data: yAxisOwned,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "RGB(34,145,227,1)"
                    },
                    {
                        offset: 1,
                        color: "RGB(34,145,227,0)"
                    }
                    ])
                },
            }
        ]
    };
    myChart.setOption(option)
}